:root {
  --swm-dash-width: 2px;
  --swm-dash-spacing: 22px;
}

.selection {
  display: inline-block;
  padding: 2px 10px 8px;
  color: var(--swm-landing-heading-selected);
  line-height: 1;

  /* normally one would do this with border dashed but that doesn't allow for modifying spacing between dashes */
  /* prettier-ignore */
  background:
    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) top/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x, /* top */
    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) right/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y, /* right */
    linear-gradient(to right, var(--swm-landing-heading-selected-border) 50%, transparent 0%) bottom/var(--swm-dash-spacing) var(--swm-dash-width) repeat-x, /* bottom */
    linear-gradient(var(--swm-landing-heading-selected-border) 50%, transparent 0%) left/var(--swm-dash-width) var(--swm-dash-spacing) repeat-y; /* left */
}

.selectionContainer {
  position: relative;
}

.selectionBox {
  position: absolute;
  width: 12px;
  height: 12px;

  background: var(--swm-white);
  border: 2px solid var(--swm-landing-heading-selected-border);
}

.boxUpper {
  top: -6px;
}

.boxLower {
  bottom: -14px;
}

.boxLeft {
  left: -14px;
}

.boxRight {
  right: -14px;
}
